<template>
	<div class="login-page">
		<div class="login-container">
			<div class="login-left">
				<div class="banner-content">
					<h1 class="system-title">企业资产管理平台</h1>
					<p class="system-desc">高效、安全、智能的一站式资产管理解决方案</p>
					<div class="system-features">
						<div class="feature-item">
							<i class="el-icon-monitor"></i>
							<span>设备管理</span>
						</div>
						<div class="feature-item">
							<i class="el-icon-medal"></i>
							<span>固定资产</span>
						</div>
						<div class="feature-item">
							<i class="el-icon-data-line"></i>
							<span>统计分析</span>
						</div>
						<div class="feature-item">
							<i class="el-icon-bell"></i>
							<span>预警提醒</span>
						</div>
					</div>
				</div>
			</div>
			<div class="login-right">
				<div class="login-form-container">
				
					
					<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
						<el-form-item prop="username">
							<div class="custom-input-container">
								<div class="input-icon-wrapper">
									<i class="el-icon-user"></i>
								</div>
								<el-input 
									v-model="loginForm.username" 
									placeholder="请输入用户名"
									class="custom-input">
								</el-input>
							</div>
						</el-form-item>
						
						<el-form-item prop="password">
							<div class="custom-input-container">
								<div class="input-icon-wrapper">
									<i class="el-icon-lock"></i>
								</div>
								<el-input 
									v-model="loginForm.password" 
									type="password" 
									placeholder="请输入密码"
									class="custom-input"
									@keyup.enter.native="handleLogin">
								</el-input>
							</div>
						</el-form-item>
						
						<el-form-item v-if="captchaEnabled" prop="code">
							<div class="code-input-group">
								<div class="custom-input-container captcha-container">
									<div class="input-icon-wrapper">
										<i class="el-icon-key"></i>
									</div>
									<el-input 
										v-model="loginForm.code"
										placeholder="验证码" 
										class="custom-input"
										@keyup.enter.native="handleLogin">
									</el-input>
								</div>
								<img class="code-image" :src="codeUrl" @click="getCode" alt="验证码" title="点击刷新验证码" />
							</div>
						</el-form-item>
						
						<div class="form-options">
							<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
							<a href="javascript:;" class="forget-pwd">忘记密码?</a>
						</div>
						
						<el-button 
							:loading="loading" 
							type="primary" 
							class="submit-btn" 
							@click.native.prevent="handleLogin">
							{{ loading ? '登录中...' : '登录' }}
						</el-button>
					</el-form>
					
					<div class="login-footer">
						<p>Copyright © 2023 企业资产管理平台 版权所有</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCodeImg
	} from "@/api/login";
	import Cookies from "js-cookie";
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt'

	export default {
		name: "Login",
		data() {
			return {
				codeUrl: "",
				loginForm: {
					username: "",
					password: "",
					rememberMe: false,
					code: "",
					uuid: ""
				},
				loginRules: {
					username: [{
						required: true,
						trigger: "blur",
						message: "请输入用户名"
					}],
					password: [{
						required: true,
						trigger: "blur",
						message: "请输入密码"
					}],
					code: [{
						required: true,
						trigger: "change",
						message: "请输入验证码"
					}]
				},
				loading: false,
				// 验证码开关
				captchaEnabled: true,
				// 注册开关
				register: false,
				redirect: undefined
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect;
				},
				immediate: true
			}
		},
		created() {
			this.getCode();
			this.getCookie();
			// 添加监听回车事件
			document.addEventListener('keyup', this.handleEnterPress);
		},
		beforeDestroy() {
			// 移除监听事件
			document.removeEventListener('keyup', this.handleEnterPress);
		},
		methods: {
			getCode() {
				getCodeImg().then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
					if (this.captchaEnabled) {
						this.codeUrl = "data:image/gif;base64," + res.img;
						this.loginForm.uuid = res.uuid;
					}
				});
			},
			getCookie() {
				const username = Cookies.get("username");
				const password = Cookies.get("password");
				const rememberMe = Cookies.get('rememberMe');
				
				// 保留code和uuid
				const { code, uuid } = this.loginForm;
				
				this.loginForm = {
					username: username === undefined ? this.loginForm.username : username,
					password: password === undefined ? this.loginForm.password : decrypt(password),
					rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
					code,
					uuid
				};
			},
			handleEnterPress(e) {
				if (e.key === 'Enter') {
					this.handleLogin();
				}
			},
			// 登录处理逻辑，防止重复提交
			handleLogin() {
				// 如果已经在加载中，直接返回，防止重复提交
				if (this.loading) {
					return;
				}
				
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loading = true;
						
						// 记住密码处理
						if (this.loginForm.rememberMe) {
							Cookies.set("username", this.loginForm.username, {
								expires: 30
							});
							Cookies.set("password", encrypt(this.loginForm.password), {
								expires: 30
							});
							Cookies.set('rememberMe', this.loginForm.rememberMe, {
								expires: 30
							});
						} else {
							Cookies.remove("username");
							Cookies.remove("password");
							Cookies.remove('rememberMe');
						}
						
						// 登录请求
						this.$store.dispatch("Login", this.loginForm)
							.then(() => {
								this.$router.push({ path: this.redirect || "/" }).catch(() => {});
							})
							.catch(() => {
								this.loading = false;
								if (this.captchaEnabled) {
									this.getCode();
								}
							});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
.login-page {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f0f4f8 0%, #d7e3ed 100%);
	position: relative;
	
	&:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-image: url('');
		opacity: 0.3;
	}
}

.login-container {
	display: flex;
	width: 900px;
	height: 500px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-left {
	width: 50%;
	background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	position: relative;
	overflow: hidden;
	
	&:before {
		content: '';
		position: absolute;
		top: -10%;
		left: -10%;
		width: 120%;
		height: 120%;
		background: url('');
		opacity: 0.2;
	}
}

.banner-content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.system-title {
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 20px;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.system-desc {
	font-size: 16px;
	margin-bottom: 40px;
	opacity: 0.9;
	line-height: 1.6;
}

.system-features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 320px;
	margin: 0 auto;
	
	.feature-item {
		width: 50%;
		padding: 15px;
		text-align: center;
		
		i {
			display: block;
			font-size: 36px;
			margin-bottom: 8px;
		}
		
		span {
			font-size: 14px;
		}
	}
}

.login-right {
	width: 50%;
	background: linear-gradient(to bottom right, #fcfcfc, #f7f9fc);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url('');
		opacity: 0.6;
		pointer-events: none;
	}
}

.login-form-container {
	width: 80%;
	max-width: 380px;
	padding: 10px 0;
	position: relative;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(5px);
	border-radius: 8px;
	padding: 30px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.login-header {
	margin-bottom: 40px;
	text-align: center;
}

.form-title {
	h2 {
		font-size: 26px;
		font-weight: 600;
		color: #333;
		margin-bottom: 15px;
	}
	
	p {
		font-size: 14px;
		color: #999;
	}
}

.login-form {
	margin-top: 20px;
	
	.el-form-item {
		margin-bottom: 30px;
	}
}

.custom-input-container {
	display: flex;
	width: 100%;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	overflow: hidden;
	background-color: #f9fafc;
	transition: all 0.2s;
	
	&:hover {
		border-color: #c0c4cc;
	}
	
	&:focus-within {
		border-color: #409eff;
		box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
		background-color: #fff;
	}
}

.input-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	background-color: #f0f2f5;
	border-right: 1px solid #dcdfe6;
	
	i {
		font-size: 18px;
		color: #909399;
	}
}

.custom-input-container:focus-within .input-icon-wrapper {
	i {
		color: #409eff;
	}
	border-right-color: #409eff;
}

.custom-input {
	flex: 1;
	
	::v-deep .el-input__inner {
		height: 44px;
		font-size: 14px;
		border: none;
		background-color: transparent;
		padding-left: 15px;
		
		&:focus {
			box-shadow: none;
		}
	}
	
	::v-deep .el-input__prefix,
	::v-deep .el-input__suffix {
		display: none;
	}
}

.code-input-group {
	display: flex;
	align-items: center;
	
	.captcha-container {
		flex: 1;
	}
	
	.code-image {
		width: 120px;
		height: 44px;
		margin-left: 20px;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		overflow: hidden;
		cursor: pointer;
	}
}

.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 35px;
	
	::v-deep .el-checkbox__label {
		color: #606266;
		font-size: 14px;
	}
	
	.forget-pwd {
		color: #409eff;
		font-size: 14px;
		text-decoration: none;
		
		&:hover {
			color: #66b1ff;
		}
	}
}

.submit-btn {
	width: 100%;
	height: 46px;
	border-radius: 4px;
	font-size: 16px;
	background-color: #409eff;
	border-color: #409eff;
	margin-bottom: 35px;
	
	&:hover, &:focus {
		background-color: #66b1ff;
		border-color: #66b1ff;
	}
	
	&:active {
		background-color: #3a8ee6;
		border-color: #3a8ee6;
	}
}

.login-footer {
	text-align: center;
	
	p {
		font-size: 12px;
		color: #909399;
	}
}

// 响应式布局
@media screen and (max-width: 992px) {
	.login-container {
		width: 95%;
		height: auto;
		flex-direction: column;
	}
	
	.login-left, 
	.login-right {
		width: 100%;
	}
	
	.login-left {
		padding: 40px 20px;
	}
	
	.login-right {
		padding: 40px 0;
	}
	
	.system-title {
		font-size: 28px;
	}
	
	.system-features {
		.feature-item {
			i {
				font-size: 30px;
			}
		}
	}
}

@media screen and (max-width: 576px) {
	.login-left {
		display: none;
	}
	
	.login-right {
		width: 100%;
		padding: 30px 0;
	}
}
</style>